<template>
  <div class="p-[20px] bg-[white]">
    <div
      class="bg-[url('@/assets/svg/file1.png')] bg-cover bg-no-repeat w-[100%] h-[100px] rounded-[10px]"
    >
      <div
        class="text-white font-bold text-[22px] transform translate-x-[150px] translate-y-[10px]"
      >
        文件内容查重
      </div>
      <div
        class="text-white text-[#888AAB] text-[14px] translate-x-[150px] translate-y-[15px]"
      >
        全格式兼容、多模态检测、高安全可控、场景化适配”的智能文件内容查重工具
      </div>
    </div>

    <div class="flex">
      <TreeIndex :loadData="searchFn" ref="treeIndex"></TreeIndex>

      <div class="flex-1 user-containter">
        <s-search
          ref="search"
          :form="form"
          class="search-container"
          :loadData="loadData"
          :reset="reset"
          :search="searchFn"
        ></s-search>
        <s-table
          ref="table"
          class="table-container"
          :columns="columns"
          :loadData="loadData"
          :componentProps="{ rowKey: 'id' }"
        >
          <template #operator>
            <div class="flex">
              <el-button
                type="primary"
                style="width: 100px"
                @click="handleAdd"
                :icon="Plus"
                >上传文件</el-button
              >

              <el-button
                type="primary"
                style="width: 100px"
                @click="handledelete('批量删除')"
                :icon="DeleteFilled"
                >批量删除</el-button
              >
            </div>
          </template>
          <template #operations="scope">
            <el-popconfirm
              title="您确定要删除吗？"
              placement="top"
              @confirm="handledelete(scope.scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  type="primary"
                  size="small"
                  style="margin-left: 10px"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </s-table>
        <KnowModel ref="modelRef" :reset="reset"></KnowModel>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { form, columns } from "./form.js";
import KnowModel from "./knowModel.vue";
import TreeIndex from "./treeIndex.vue";
import "./index.css";
import { DeleteFilled, LocationFilled, Plus } from "@element-plus/icons-vue";
import { getFilesByLabel, deleteFilesBylds } from "@/api/know.js";
import { ElMessage } from "element-plus";

const table = ref(null);
const modelRef = ref(null);
const treeIndex = ref(null);
const search = ref(null);

const loadData = () => {
  let params;
  if (treeIndex.value.defaultSelectedId == "全部") {
    params = search.value.formState;
  } else {
    params = {
      fileLabel: treeIndex.value.defaultSelectedId,
      ...search.value.formState,
    };
  }

  return getFilesByLabel(params)
    .then((res) => {
      return {
        total: res.data.total,
        data: res.data.files,
      };
    })
    .catch(() => {
      return { total: 0, data: [] };
    });
};

const handleAdd = () => {
  modelRef.value.handleVisible(true, "新增", {});
};

const handledelete = (params) => {
  if (params === "批量删除") {
    if (table.value.selectedRows.length === 0) {
      ElMessage.warning("请选择文件");
      return;
    }

    const ids = table.value.selectedRows.map((item) => item.id);
    deleteFilesBylds({ ids: ids }).then((res) => {
      if (res.code === 500) {
        return;
      }
      reset();
      ElMessage.success("批量删除成功");
    });
    return;
  }
  deleteFilesBylds({ ids: [params.id] }).then((res) => {
    if (res.code === 500) {
      return;
    }
    reset();
    ElMessage.success("删除成功");
  });
};

const reset = (params) => {
  treeIndex.value.reset(params);
  table.value.refresh(params);
};

const searchFn = (params) => {
  table.value.refresh(params);
};
</script>
